﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<center>
    <form id="from" action="save" method="post">
        <table>
            <tr>
                <th>用户名</th>
                <th><input type="text" name="username" placeholder="用户名"/></th>
            </tr>
            <tr>
                <th>姓名</th>
                <th><input type="text" name="name" placeholder="姓名"/></th>
            </tr>
            <tr>
                <th>年龄</th>
                <th><input type="text" name="age" placeholder="年龄"/></th>
            </tr>
            <tr>
                <th>电话</th>
                <th><input type="text" name="phone" placeholder="电话"/></th>
            </tr>
        </table>
        <!--<button type="button" onclick="save()">提交</button>-->
        <button type="submit" >提交</button>
    </form>
    <br/><br/><br/><br/><br/><br/>
    <table border="1">
        <tr>
            <th>UserId</th>
            <th>用户名</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        <tr th:each="user : ${users}" >
            <td th:id="userId" th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.age}"></td>
            <td th:text="${user.phone}"></td>
            <td><button onclick='send(this)' type="button">数据发送</button></td>
        </tr>
    </table>
</center>
</body>
<script th:src="@{/js/jquery-1.11.2.min.js}"></script>
<script th:src="@{/js/jquery-form.js}"></script>
<script>
    function send(obj) {
        var userid= $($(obj.parentNode.parentNode).find("#userId")).text();
        $.post("/send",{"userid":""+userid},function (data) {
            if (data=='ok'){
                alert("发送成功")
            }else {
                alert("发送失败")
            }
        })
    }
//    function save() {
//        var params = $("#form").serializeArray();
//        $.ajax({
//            type : "POST",
//            url : "/save",
//            data : params,
//            success : function(data) {
//                alert("成功！");
//            },
//            error : function(e) {
//                alert("失败");
//            }
//        });
//    }
</script>
</html>